<template>
  <div>
    <div class="-body">
      <div class="chat-header border-bottom py-xl-4 py-md-3 py-2">
        <div class="container-xxl">
          <div class="row align-items-center">
            <div class="col-6 col-xl-4">
              <div class="media">
                <div class="avatar me-3">
                  <div
                    class="avatar rounded-circle no-image bg-primary text-light"
                  >
                    <span>
                    <img :src="form.avatar" alt="" 
                    style=" width:58px;height:58px;border-radius:50%;border:1px solid #F1F1F1;padding:4px">

                    </span>
                  </div>
                </div>
                <div class="media-body overflow-hidden">
                  <div class="d-flex align-items-center mb-1">
                    <h6 class="text-truncate mb-0 me-auto">[{{form.username}}]{{form.realname}}</h6>
                  </div>
                 <div v-if="form.online==true" class="text-truncate" style="font-size:">
 <i class="zmdi zmdi-circle text-success"></i>
 Online
</div>
<div v-if="form.online==false" class="text-truncate" style="font-size:">
 <i class="zmdi zmdi-circle text-danger"></i>
 Offline
</div>
                </div>
              </div>
            </div>

            <div class="col-6 col-xl-8 text-end"></div>
          </div>
        </div>
      </div>

   

      <div class="chat-content">
        <div class="container-xxl" style="">
          <ul class="list-unstyled py-4" id="chat" style="padding-left:50px; height:500px;overflow-y:scroll">
          <block v-for="(item, index) in msgList" :key="index">
         
            <li class="d-flex message" style="padding-bottom:15px"  v-if="account.id==item.toid">
              <div class="mr-lg-3 me-2">
                <div
                  class="avatar sm rounded-circle bg-primary d-flex align-items-center justify-content-center"
                >
                  <span>
                  <img :src="base+item.from.info.avatar" alt="" style="width:48px;height:48px;border-radius:50%;border:1px solid #21aa93;padding:4px">

                  </span>
                </div>
              </div>

              <div class="message-body" style="padding-left:15px">
                
                
                <div class="message-row d-flex align-items-center">
                  <div class="message-content p-3" v-if="item.isfile!=1">
                   {{item.con}}
                  </div>
                   <div class="message-content p-3" v-if="item.isfile==1">
                   发送了
                   <a target="_blank" :href="base+item.con">文件</a>
                  </div>
                </div>

                

               

                
              </div>
            </li>

            
<li class="d-flex message right" style="padding-right:50px;" v-if="account.id==item.fromid">
<div class="message-body">
<span class="date-time text-muted"> [{{item.from.username}}] {{item.from.realname}} {{item.created}} <i class="zmdi zmdi-check-all text-primary"></i></span>
<div class="message-row d-flex align-items-center justify-content-end">



 <div class="message-content border p-3" v-if="item.isfile!=1">
                   {{item.con}}
                  </div>
                   <div class="message-content border p-3" v-if="item.isfile==1">
                   发送了
                   <a target="_blank" :href="base+item.con">文件</a>
                  </div>
</div>

</div>
</li>




          </block>

            
          </ul>
        </div>
      </div>

      <div class="chat-footer border-top border-bottom py-xl-4 py-lg-2 py-2">
        <div class="container-xxl">
          <div class="row">
            <div class="col-12">
              <div class="input-group align-items-center">
                <input
                  type="text" v-model="con"  @keyup.enter="send"
                  class="form-control border-0 pl-0"
                  placeholder="输入要发送的信息"
                />

                
                <div class="input-group-append">
                  <span class="input-group-text border-0">
                   


   <el-upload
                class="btn btn-sm btn-link text-muted"
                :action="uploadFile"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <i class="zmdi zmdi-attachment font-22"></i> </el-upload>

                  </span>
                </div>

                <div class="input-group-append">
                  <span class="input-group-text border-0 pr-0">
                    <button type="button" @click="send" class="btn btn-primary">
                      <span class="d-none d-md-inline-block me-2">发送</span>
                      <i class="zmdi zmdi-mail-send"></i>
                    </button>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { saveData,loadData,uploadFile} from '@/api/chatmsgApi'
import { getInfo } from '@/api/accountApi'
export default {
  data() {
    return {  uploadFile: '',
      toId: 0,con:'',
      form: {},
      msgList:[],  base:process.env.VUE_APP_BASE_URL,
      account: JSON.parse(localStorage.getItem("account")),
    };
  },
  mounted: function () {
    this.toId = this.$route.params.id;
  },
  watch: {
    $route() {
      this.toId = this.$route.params.id;
    },
    toId() {
      this.getInfo();
    },
  },
 mounted(){
 let that = this
     // this.getInfo();
     this.timer = window.setInterval(()=>{
     that.getMsg()
     
     },1000)
 },
  created() {
    this.$nextTick(() => {
      this.toId = this.$route.params.id;
      this.getInfo();
      this.getMsg()

  this.uploadFile =
            uploadFile() + '?fromid=' + this.account.id+'&toid='+this.toId

    });
  }, beforeDestroy(){
clearInterval(this.timer);    
this.timer = null;
  },
  methods: {
   handleAvatarSuccess(res, file) {
      this.form.avatar = URL.createObjectURL(file.raw)
      console.log(res)
      if (res.code == 1) {
      this.getMsg()
        this.$message({
          message: '发送成功',
          type: 'success',
        })
      } else {
        this.$message({
          message: '发送失败',
          type: 'error',
        })
      }
    },
    beforeAvatarUpload(file) {
      
      return true
    },
   getMsg(){
      let param = {
         uid:this.toId,
         uid1:this.account.id
      }
      console.log(param)
      loadData(param).then(resp=>{
         this.msgList = resp.data.data
         console.log(this.msgList)
         let div = document.getElementById('chat');
         div.scrollTop = div.scrollHeight
      })
   },
   send(){
      if(this.con==''){
 this.$message({
                message: '请输入发送内容',
                type: 'error',
              })
      }else{
         let msg = {
            fromid:this.account.id,
            toid:this.toId,
            con:this.con
         }
         saveData(msg).then(resp=>{
this.getMsg()
this.con = ''
         })
      }
   },
    getInfo() {
      let account_id = this.toId;
      getInfo({ id: account_id }).then((resp) => {
        let response = resp.data;

        if (response.code == 1) {
          this.form = response.data;
          this.form.avatar = process.env.VUE_APP_BASE_URL + this.form.avatar;
         
        } else {
          this.$message("获取信息失败");
        }
        console.log(resp);
      });

      console.log("account_id:" + account_id);
    },
  },
};
</script>

<style scoped>

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 4px; /* 滚动条宽度 */
}
 
/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道颜色 */
}
 
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条滑块颜色 */
}
 
/* 滚动条的滑块：鼠标悬停时 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滚动条滑块颜色：鼠标悬停时 */
}
</style>